<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter />
        <ActionBar ref="actionBar" />
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        :multiple-selected="false"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button v-if="row.status==='created' && row.upUserCode === username" type="text" title="编辑" size="mini" icon="el-icon-edit" @click="edit(row.id)" />
            <el-button v-if="row.status === 'created' && row.upUserCode === username " type="text" title="开始交班" size="mini" icon="el-icon-video-play" @click="start(row.id)" />
            <el-button v-if="row.status==='created'" type="text" title="删除" size="mini" icon="el-icon-delete" @click="remove(row.id)" />
            <el-button v-if="row.status==='run'" title="接班" type="text" size="mini" icon="el-icon-thumb" @click="succeed(row.id)" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
    <FormDialog title="编辑" :show.sync="dialogFormVisible" width="70%" @on-ok="ok" @on-cancel="cancel">
      <EditForm v-if="dialogFormVisible" :id="editId" ref="editForm" />
    </FormDialog>
    <ViewDialog
      class="fixed-dialog-height"
      title="查看"
      :show.sync="dialogViewVisible"
      width="70%"
      @on-cancel="viewCancel"
    >
      <ViewForm :id="editId" />
    </ViewDialog>
  </div>
</template>

<script>
// secondary package based on el-pagination
import ViewDialog from '@neu/biz-core/components/ViewDialog'
import FormDialog from '@neu/biz-core/components/FormDialog'
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import EditForm from './components/editForm'
import ViewForm from './components/viewForm'
import ActionBar from './components/actionBar'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import { formatDate } from '@neu/biz-core/utils/utils'
import { dutyInfo } from '@neu/dcom-ui/api/teamgroup'
import { getInfo } from '@neu/biz-core/api/user'
import {
  page,
  remove,
  status,
  startHandover
} from '@neu/dcom-ui/api/handover'
export default {
  name: 'HandoverPage',
  components: {
    TableFilter,
    FormDialog,
    EditForm,
    ActionBar,
    PageableTable,
    ViewForm,
    ViewDialog
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  data() {
    return {
      r: page,
      d: remove,
      // 交接班状态
      handoverStatus: [],
      insideColumns: [
        {
          title: '所属部门',
          key: 'orgName',
          sortable: 'custom'
        },
        {
          title: '交班人',
          key: 'upUserName',
          sortable: 'custom',
          render: (h, params) => { // 查看功能
            if (params.row.status === 'end') {
              return h('span', [
                h('el-link', {
                  class: 'font-12',
                  attrs: { title: params.row.upUserName },
                  props: { type: 'primary' },
                  on: { click: () => { this.view(params.row.id) } }},
                params.row.upUserName)
              ])
            } else {
              return h('span', params.row.upUserName)
            }
          }
        },
        {
          title: '交班时间',
          key: 'upTime',
          sortable: 'custom',
          render: (h, params) => {
            return h('span', params.row.upTime ? formatDate(params.row.upTime) : '-')
          }
        },
        {
          title: '接班人',
          key: 'downUserName',
          sortable: 'custom'
        },
        {
          title: '接班时间',
          key: 'downTime',
          sortable: 'custom',
          render: (h, params) => {
            return h('span', params.row.upTime ? formatDate(params.row.downTime) : '-')
          }
        },
        {
          title: '状态',
          key: 'status',
          render: (h, params) => {
            const filterData = this.handoverStatus ? this.handoverStatus.filter(ele => ele.code === params.row.status) : []
            const text = filterData.length > 0 ? filterData[0].text : ''
            return h('span', [
              h('el-tag', text)
            ])
          }
        }
      ],
      // 当前登录用户的编码
      username: '',
      // 编辑新增弹窗
      dialogFormVisible: false,
      // 编辑传参
      editId: -1,
      dialogViewVisible: false,
      // 检索条件
      searchObj: {
        s_isUserOrg: true,
        s_isUserFct: true
      }
    }
  },
  created() {
    getInfo().then(res => { this.username = res.data.username })
    // 交接班状态
    status().then(res => { this.handoverStatus = res.data })
    this.fetch()
  },
  mounted() {
    this.addBtnContro()
  },
  methods: {
    // 表格编辑按钮点击事件处理
    edit(id) {
      // 打开对话框
      this.editId = id
      this.dialogFormVisible = true
    },
    // 开始交班
    start(id) {
      startHandover(id).then(res => {
        this.$message({
          showClose: true,
          message: '交班成功！',
          type: 'success'
        })
        this.refresh()
        this.addBtnContro()
      })
    },
    // 接班
    succeed(id) {
      dutyInfo().then(res => {
        if (res.data.length > 0) {
          // 打开对话框
          this.editId = id
          this.dialogFormVisible = true
        } else {
          this.$message({
            showClose: true,
            message: '你不在值班范围内',
            type: 'error'
          })
        }
      })
    },
    // 编辑资产对话框确认事件处理
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        this.addBtnContro()
        // 关闭对话框
        this.editId = -1
        this.dialogFormVisible = false
      })
    },
    cancel() {
      this.editId = -1
      // this.$refs.editForm.reset()
      // 关闭对话框
      this.dialogFormVisible = false
    },
    view(id) {
      // 打开对话框
      this.editId = id
      this.dialogViewVisible = true
    },
    viewCancel() {
      this.editId = -1
      // 关闭对话框
      this.dialogViewVisible = false
    },
    addBtnContro() {
      this.$refs.actionBar.controAddBtn()
    }
  }
}
</script>
